<template>
	<view class="">
		<u-sticky>
			<view class="sticky">
				<mix-search></mix-search>
				<u-tabs
					:list="navList"
					name="category"
					:active-item-style="activeStyle"
					font-size="26"
					active-color="#CC1313"
					inactive-color="#666666"
					:is-scroll="true"
					:current="current"
					:bar-width="90"
					:bar-height="2"
					@change="change"
				></u-tabs>
			</view>
		</u-sticky>
		<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :back-top="true" :headerHeight="90">
			<view class="" v-for="(item,index) in dataList" :key="index">
				<page-circle-item :item="item"></page-circle-item>
			</view>
		</s-pull-scroll>
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
import mixSearch from "@/components/mix-search/index.vue";
import pageCircleItem from "@/components/page-item-list/page-circle-item.vue";
export default {
	components: {
		mixSearch,
		pageCircleItem
	},
	data() {
		return {
			activeStyle: {
				color: "#000000"
			},
			navList: [],
			current: 0,
			categoryId: "",
			dataList: []
		};
	},
	onLoad() {
		this.loadPageIndex();
	},
	onShareAppMessage() {
		return {
			path: `/pages/tabs/find?inviteId=${uni.getStorageSync("uid")}`
		}
	},
	methods: {
		change(index) {
			this.current = index;
			this.categoryId=this.navList[index].id;
			this.refresh();
		},
		pullDown(pullScroll) {
			setTimeout(() => {
				this.loadData(pullScroll);
			}, 200);
		},
		async loadPageIndex() {
			const res = await this.$request("article/category", {});
			if (res.result == 0) {
				let obj = {
					id: "",
					name: "全部"
				};
				res.dataList.unshift(obj);
				this.navList = res.dataList;
				this.refresh();
			}
		},
		async loadData(pullScroll) {
			const data = {
				uid: uni.getStorageSync("uid"),
				categoryId: this.categoryId,
				pageNo: pullScroll.page,
				pageSize: "10"
			};
			const res = await this.$request("article/list", data, {showLoading: true});
			if (pullScroll.page == 1) {
				this.dataList = [];
			}
			if (res.result == 0) {
				if (res.data.list.length == 0) {
					pullScroll.empty();
					return;
				}
				this.dataList = this.dataList.concat(res.data.list);
				pullScroll.page >= Math.ceil(res.data.count / 10) ? pullScroll.finish() : pullScroll.success();
			} else {
				pullScroll.empty();
				this.$util.msg(res.resultNote);
			}
		}
	}
};
</script>

<style></style>
